import { Product } from '@/types/product'
import React, { FC, useState } from 'react'
import { OrderProduct, Order, EOrderParamTypeStr, EOrderParamType } from '@/types/orderList/index'
import OrderGoods from './orderGoods'
import { useNavigate } from 'react-router-dom'
import { EOrderStatus } from '@/types/enum'
import { XBusinesslineId } from '@/constants'
interface OrderParam {
  order: Order
  status: EOrderStatus
}
const orderGoodsList: FC<OrderParam> = (props) => {
  const navigate = useNavigate()
  const [showProductInfoList, setshowProductInfoList] = useState<OrderProduct[]>(
    props.order.productInfos.length > 3
      ? props.order.productInfos.slice(0, 3)
      : props.order.productInfos,
  )
  return (
    <div
      className="w-auto h-auto bg-white  shadow-bs5 m-r1.2 rounded-r0.8 "
      onClick={() => {
        navigate(`/orderDetail?orderNum=${props.order.orderNum}`, {
          // state: { orderId, userId },
        })
      }}
    >
      <div className="">
        <span className=" inline-block pl-r1.2 mt-r1.6">{props.order.statusDesc}</span>
        {showProductInfoList.map((val, key) => (
          <div key={key}>
            {' '}
            <OrderGoods key={key} product={val} status={props.status}></OrderGoods>{' '}
            {showProductInfoList.length > 0 ? (
              <div className=" clear-both  border border-white-F3F3F4  scale-y-50 mt-r0.0 mb-r0.0 "></div>
            ) : null}
          </div>
        ))}
        {props.order.productInfos.length > showProductInfoList.length ? (
          <div className=" text-center mt-r1.0">
            <span
              onClick={(e) => {
                e.stopPropagation()
                setshowProductInfoList(props.order.productInfos)
              }}
            >
              展开 <i className="iconfont icon-icon_arrow_down text-r1.2 "></i>
            </span>
          </div>
        ) : (
          <div className=" text-center mt-r1.0">
            {showProductInfoList.length < 3 ? null : (
              <span
                onClick={(e) => {
                  e.stopPropagation()
                  setshowProductInfoList(props.order.productInfos.slice(0, 3))
                }}
              >
                收起 <i className="iconfont icon-icon_arrow_up text-r1.2 "></i>
              </span>
            )}
          </div>
        )}
      </div>
      <div className="h-r3.4 leading-r2.5 pb-r1.6 ">
        <div className=" text-right pr-r1.6 text-r1.2  font-regular text-gray-666666">
          <span>共{props.order.productInfos.length}项，实付款</span>{' '}
          <span className=" text-r1.4 text-gray-333333 font-semibold">
            ¥{props.order.realPrice}
          </span>
        </div>
      </div>
      {props.status === EOrderStatus.notPay ? (
        <div className="relative block  h-r3.2">
          {' '}
          <span
            className=" absolute right-0 text-r1.2 -top-r0.4 h-r2.9 w-r7.8  text-white leading-r2.9 rounded-r1.5  bg-gradient-to-r from-orange-FF664F to-orange-FF3627  inline-block text-center "
            onClick={(e) => {
              e.stopPropagation()
              window.location.href = `/api/trade/Order/show?X-Businessline-Id=${XBusinesslineId}&orderNum=${props.order.orderNum}`
            }}
          >
            立即支付
          </span>
        </div>
      ) : null}
    </div>
  )
}

export default orderGoodsList
